<script setup>
import { computed, ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getSiteDetailAPI } from '@/api/site'
import dayjs from 'dayjs'
const today = dayjs()
const IMAGE_URL = computed(() => import.meta.env.VITE_IMAGE_URL)
const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
const datePicker = ref([])

const initDateList = (days) => {
  // console.log(today.format('YYYY-MM-DD'), '12===')
  selectDate.value = today.format('YYYY-MM-DD')
  let dateList = []
  for (let i = 0; i < days; i++) {
    dateList.push({
      day: today.add(i, 'day').format('YYYY-MM-DD'),
      week: weekdays[today.add(i, 'day').day()],
    })
  }
  return dateList
}

const selectDate = ref('')
const activeIndex = ref(0)
const setItem = (index, item) => {
  activeIndex.value = index
  selectDate.value = item.day
}

const detailObj = ref({})
// 获取详情
const getDetail = async (id) => {
  const res = await getSiteDetailAPI(id)
  detailObj.value = res.data
}

// 打电话
const call = () => {
  uni.makePhoneCall({
    phoneNumber: '17666666666',
  })
}

// 打开地图
const openMap = (address) => {
  // 获取当前位置
  uni.getLocation({
    type: 'wgs84',
    success: (res) => {
      // 打开内置地图
      uni.openLocation({
        latitude: res.latitude, // 目标位置的纬度，浮点数，范围为90~-90
        longitude: res.longitude, // 目标位置的经度，浮点数，范围为180~-180。
        scale: 18, // 缩放比例，范围5~18
        name: address, // 位置名
        address, // 地址的详细说明
        success() {
          console.log('地图打开成功')
        },
        fail(err) {
          console.error('地图打开失败', err)
        },
      })
    },
    fail(err) {
      console.error('获取位置失败', err)
    },
  })
}

// 查看更多
const more = () => {
  uni.navigateTo({
    // url: `/pages/cooperate/reservation?date=2024-10-21&siteId=1`,
    url: `/pages/cooperate/reservation?date=${selectDate.value}&siteId=${detailObj.value.id}`,
  })
}

onLoad((options) => {
  getDetail(options.id)
})

onMounted(() => {
  datePicker.value = initDateList(4)
})
</script>

<template>
  <view class="active-detail">
    <view class="header-view">
      <image
        class="big-bg"
        :src="`${IMAGE_URL}${detailObj.siteImg}`"
        mode="aspectFill"
      />
    </view>
    <view class="detail">
      <view class="title">{{ detailObj.siteName }}</view>
      <view class="info">
        <view class="name">{{ detailObj.siteAddress }}</view>
        <view class="box">
          <view class="phone" @click="call">
            <image
              src="../../static/images/active/phone.png"
              mode="aspectFill"
            />
            电话
          </view>
          <view class="address" @click="openMap(detailObj.siteAddress)">
            <image
              src="../../static/images/active/address3.png"
              mode="aspectFill"
            />
            导航
          </view>
        </view>
      </view>
      <view class="reservation">
        <view class="r-title">场地预约</view>
        <view class="date-view">
          <view
            class="date-item"
            :class="activeIndex == index ? 'active' : ''"
            v-for="(item, index) in datePicker"
            :key="index"
            @click="setItem(index, item)"
          >
            <view class="day">{{
              item.day == today.format('YYYY-MM-DD')
                ? '今日'
                : item.day.slice(-5)
            }}</view>
            <view class="date">{{ item.week }}</view>
          </view>
          <view @click="more" class="more">查看更多</view>
        </view>
      </view>
      <view class="desc">
        <view class="d-title">场地介绍</view>
        <view class="d-content"> {{ detailObj.siteDescrip }}</view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.active-detail {
  position: relative;
  height: 100vh;
  .header-view {
    height: 580rpx;
    .big-bg {
      width: 100%;
      height: 100%;
    }
  }
  .detail {
    position: relative;
    background: #ffffff;
    margin-top: -80rpx;
    padding: 48rpx 60rpx;
    border-radius: 34rpx 34rpx 0 0;
    .title {
      color: #000000;
      font-size: 32rpx;
      font-weight: 500;
      padding-bottom: 26rpx;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    .info {
      margin: 40rpx 0 86rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .name {
        width: 240rpx;
        color: #666666;
        font-size: 24rpx;
        font-weight: 400;
        white-space: nowrap; /* 不换行 */
        overflow: hidden; /* 超出部分隐藏 */
        text-overflow: ellipsis;
      }
      .box {
        display: flex;
        align-items: center;
        image {
          width: 36rpx;
          height: 36rpx;
          margin-right: 2rpx;
        }
        .phone {
          margin-right: 52rpx;
        }
        .phone,
        .address {
          display: flex;
          align-items: center;
          color: #666666;
          font-size: 28rpx;
          font-weight: 400;
        }
      }
    }
    .reservation {
      .r-title {
        font-size: 32rpx;
        font-weight: 500;
        color: #000000;
        margin-bottom: 20rpx;
      }
      .date-view {
        display: flex;
        align-items: center;
        .date-item {
          border: 1px solid transparent;
          flex: 1;
          padding: 6rpx 0;
          border-radius: 8px;
          text-align: center;
          .day {
            color: #666666;
            font-size: 28rpx;
            font-weight: 500;
          }
          .date {
            color: #666666;
            font-size: 28rpx;
            font-weight: 400;
          }
        }
        .more {
          flex-shrink: 0;
          width: 60rpx;
          color: #666666;
          font-size: 28rpx;
          font-weight: 500;
          margin-left: 10rpx;
        }
      }
    }
    .desc {
      margin-top: 32rpx;
      .d-title {
        font-size: 32rpx;
        font-weight: 500;
        color: #000000;
        margin-bottom: 20rpx;
      }
      .d-content {
        color: #333333;
        font-size: 28rpx;
        font-weight: 400;
      }
    }
  }
}

.active {
  background: #fff8f5 !important;
  border: 1px solid #ea5506 !important;
  .day,
  .date {
    color: #ea5506 !important;
  }
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.limit2 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  white-space: nowrap;
}
.limit3 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  white-space: nowrap;
}
</style>
